<template>
  <v-container fluid>
    <v-layout row fill-height>
      <v-flex xs6>
        <v-card v-if="liveData[0]" :to="'/detail/' + liveData[0].id">
          <v-card-media :src="MImage(liveData[0].image)" height="200"></v-card-media>
          <v-card-title primary-title>
            <h4 class=" mb-0">{{liveData[0].title || '直播1'}}</h4>
          </v-card-title>
        </v-card>
      </v-flex>
      <v-flex xs6 >
        <v-layout row wrap >
          <v-flex xs12 >
            <v-card v-if="liveData[1]" :to="'/detail/' + liveData[1].id">
              <v-card-media :src="MImage(liveData[1].image)" height="80"></v-card-media>
              <v-card-title primary-title>
                <h4 class=" mb-0">{{liveData[1].title || '直播2'}}</h4>
              </v-card-title>
            </v-card>
          </v-flex>
          <v-flex xs12 >
            <v-card v-if="liveData[2]" :to="'/detail/' + liveData[2].id">
              <v-card-media :src="MImage(liveData[2].image)" height="80"></v-card-media>
              <v-card-title primary-title>
                <h4 class=" mb-0">{{liveData[2].title || '直播3'}}</h4>
              </v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: 'LiveVideo',
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      liveData: this.data || []
    }
  },
  mounted: function () {
    while (this.liveData.length < 3) {
      this.liveData.push({
        id: 1,
        title: '直播标题',
        image: 'https://cdn.vuetifyjs.com/images/cards/desert.jpg',
        content: ''
      })
    }
  }
}
</script>
